import React, { Component } from 'react'
import Header from '../../components/Header'
import Search from '../../components/Search';
import NewUser from './components/NewUser';
import './Home.less'
import {reqGetnew,reqGetgroupon,reqGetcountdown,reqGetseckill,reqGetindexgoods} from '../../http/api'
import Seckill from './components/Seckill';
import {UnorderedListOutline} from 'antd-mobile-icons'
import Indexgoodscar from './components/IndexGoodsCar';


export default class Home extends Component {
  constructor(){
    super();
    this.state = {
      newUserArr:[],
      grouponArr:[],
      countdownArr:[],
      seckillArr:[],
      indexgoodsArr:[],
      navArr:['限时秒杀','畅销商品','品质大牌','小U自营','积分商城']
    }
  }
  async getIndexInfo(fn, key){
    try {
      let res = await fn();
      if(res.data.code===200){
        this.setState({
          [key]:res.data.list
        })
        
      }
    }catch(err){
      console.log(err);
    }
  }  
  componentDidMount(){
    // 获取新人专享
    this.getIndexInfo(reqGetnew, 'newUserArr');

    // 获取万人团
    this.getIndexInfo(reqGetgroupon, 'grouponArr');

    // 获取倒计时
    this.getIndexInfo(reqGetcountdown, 'countdownArr');

    // 获取秒杀
    this.getIndexInfo(reqGetseckill, 'seckillArr');

    // 获取首页商品
    this.getIndexInfo(reqGetindexgoods, 'indexgoodsArr');
  }
  toList(){
    this.props.history.push('/list');
  }
  render() {
    let {newUserArr,seckillArr,indexgoodsArr} = this.state;
    return (
      <div className='Home'>
          <Header title="首页"></Header>
          <Search pic right></Search>
          <NewUser items={newUserArr}></NewUser>
          <div className="nav">
            {
              this.state.navArr.map(item=>{
                return <div key={item} className='item' onClick={()=>this.toList()}>
                  <img src="/uploads/icon_index_kingkong_seckill.png" alt="" />
                  <span>{item}</span>
                </div>
              })
            }
          </div>
          <Seckill seckillArr={seckillArr}></Seckill>
          <div className="adver">
            <img src="./uploads/瓷片区.png" alt="" />
          </div>
          <div className="goodslist">
            <div className="head">
              <span>综合推荐</span><span>销量</span><span>价格</span><span>好评度</span><span>店铺</span><span><UnorderedListOutline style={{'fontSize':'.3rem'}}/>分类</span>
            </div>
            <Indexgoodscar indexgoodsArr={indexgoodsArr}></Indexgoodscar>
          </div>
      </div>
    )
  }
}
